<template>
  <div
    :style="$bgImage(showImage, { width: size, height: size })"
    class="com-global-image-up-base w-flex-center w-image-fill w-pointer"
    @click.self="imageShow"
  >
    <svgicon
      v-if="showImage && !isInit"
      name="refresh"
      class="refresh-icon"
      @click="imgSelClick"
    />
    <svgicon
      v-else-if="!isInit"
      name="add-image"
      style="padding: 10%"
      width="100%"
      height="100%"
      color="#ccc"
      @click="imgSelClick"
    />
    <svgicon name="edit" class="edit-icon" @click.stop="editBtnClick" />
    <input
      ref="INPUT_FILE"
      class="w-input-hid"
      type="file"
      accept="image/*"
      @click.stop
      @change="fileChange"
    />
    <w-image-show ref="IMAGE_SHOW" />
    <input-modal ref="InputModal" title="图片" label="图片链接" @success="inputSuccess" />
  </div>
</template>

<script lang="ts">
import WImageShow from '@/components/global/viewer'
import { ExistFile, LocalImage } from '@/utils/tool'
import '@/icons/add-image'
import '@/icons/refresh'
import '@/icons/edit'
// eslint-disable-next-line import/order
import { Vue, Component, Prop } from 'vue-property-decorator'
import InputModal, { InputModalComType } from '@/components/global/modal/input'

@Component({
  name: 'ComGlobalImageUp',
  components: {
    WImageShow,
    InputModal
  }
})
export default class ComGlobalImageUp extends Vue {
  @Prop({ default: '' }) souceUrl!: string
  @Prop({ default: '200px' }) size!: string
  @Prop({ default: true }) input!: boolean

  // 选择的图片/输入的图片路径
  selImage: any = null
  // 文件事件对象
  fileEvent: any = null
  isInit = true

  mounted () {
    this.isInit = false
  }

  /**
   * 需要显示的图片地址
   */
  get showImage () {
    return this.selImage || this.souceUrl
  }

  /**
   * 图片显示
   */
  imageShow () {
    (this.$refs.IMAGE_SHOW as any).show([this.showImage])
  }

  /**
   * 图片选址点击
   */
  imgSelClick () {
    (this.$refs.INPUT_FILE as any).dispatchEvent(new MouseEvent('click'))
  }

  /**
   * 编辑按钮点击
   */
  editBtnClick () {
    (this.$refs.InputModal as InputModalComType).show()
  }

  inputSuccess (url: string) {
    this.selImage = url
    this.fileEvent = null;
    (this.$refs.INPUT_FILE as any).value = null
  }

  /**
   * 文件改变的时候调用
   * @param e 事件
   */
  fileChange (e:any) {
    if (ExistFile(e)) {
      // 预览图片
      LocalImage(e)
        .then((data) => {
          this.selImage = data
          this.fileEvent = e
        })
        .catch(() => {
          this.$message.error('预览图片出错')
        })
    }
  }

  /**
   * 上传图片
   * @returns {*}
   */
  getImage () {
    return new Promise((resolve, reject) => {
      if (this.fileEvent) {
        resolve({
          type: 'SEL_FILE',
          event: this.fileEvent,
          img: this.selImage
        })
      } else if (this.selImage) {
        resolve({
          type: 'INPUT_URL',
          url: this.selImage
        })
      } else if (this.souceUrl) {
        resolve({
          type: 'SOUCE_URL',
          url: this.souceUrl
        })
      } else {
        reject({ code: 'imageUpErr', msg: '请选择图片' }) // eslint-disable-line
      }
    })
  }

  /**
   * 清除选中的图片
   */
  clear () {
    this.fileEvent = null
    this.selImage = null;
    (this.$refs.INPUT_FILE as any).value = ''
  }
}

</script>

<style lang="less" scoped>
.com-global-image-up-base {
  border: 1px dashed #ddd;
  border-radius: 6px;
  overflow: hidden;
  position: relative;

  .edit-icon,
  .refresh-icon {
    position: absolute;
    top: 0;
    padding: 5px;
    background-color: rgba(3, 3, 3, 0.5);
    width: 34px;
    height: 34px;
    fill: #fff;
  }

  .edit-icon {
    left: 0;
  }

  .refresh-icon {
    right: 0;
  }
}
</style>
